<template>
  <a-card class="config-page" title="分销配置" style="width: 100%">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ style: { width: '120px' } }"
    >
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="分销启用：" name="brokerageFuncStatus">
            <a-radio-group v-model:value="form.brokerageFuncStatus">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="满额分销最低金额：" name="storeBrokerageQuota">
            <a-input-number
              v-model:value="form.storeBrokerageQuota"
              placeholder="满额分销满足金额开通分销权限"
              :min="-1"
              :step="1"
              @keydown="channelInputLimit"
            />
          </a-form-item>
          <a-form-item label="分销关系绑定：" name="brokerageBindind">
            <a-radio-group v-model:value="form.brokerageBindind">
              <a-radio :value="0">所有用户</a-radio>
              <a-radio :value="1">新用户</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="分销气泡：" name="storeBrokerageIsBubble">
            <a-radio-group v-model:value="form.storeBrokerageIsBubble">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="一级返佣比例：" name="storeBrokerageRatio">
            <a-input-number
              v-model:value="form.storeBrokerageRatio"
              step-strictly
              :min="0"
              :max="100"
              placeholder="订单交易成功后给上级返佣的比例0 - 100,例:5 = 反订单金额的5%"
            />
            <span>%</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="二级返佣比例：" name="storeBrokerageTwo">
            <a-input-number
              v-model:value="form.storeBrokerageTwo"
              step-strictly
              :min="0"
              :max="100"
              placeholder="订单交易成功后给上级返佣的比例0 ~ 100,例:5 = 反订单金额的5%"
            />
            <span>%</span>
          </a-form-item>
          <a-form-item label="提现最低金额：" name="userExtractMinPrice">
            <a-input-number
              v-model:value="form.userExtractMinPrice"
              :min="0"
              :step="1"
              placeholder="用户提现最低金额"
            />
          </a-form-item>
          <a-form-item label="提现银行卡：" name="userExtractBank">
            <a-input
              v-model:value="form.userExtractBank"
              type="textarea"
              :rows="4"
              placeholder="提现银行卡，每个银行换行"
            />
          </a-form-item>
          <a-form-item label="冻结时间：" name="extractTime">
            <a-input-number
              v-model:value="form.extractTime"
              :min="0"
              placeholder="佣金冻结时间(天)"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <div class="flex center">
        <a-button
          style="width: 300px"
          type="primary"
          :loading="loading"
          @click="save()"
        >
          提交
        </a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { configUpdateApi,configApi } from './api';
import { Config, type IConfig } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
  data: Partial<IConfig>
}>(),{
})
const { formRef, submit, close } = useDialog({ validCallback: save })
let loading = $ref(false)
let form = $ref(new Config())

onMounted(()=>getDetal())
function getDetal(){
  configApi().then(config => {
      form.setProps(config)
    })
}
const rules = {
  paramKey: [validReg('required', '请输入参数名')],
  paramValue: [validReg('required', '请输入参数值')]
}

onMounted(() => {
})
const emit = defineEmits(['change'])
function save() {
  configUpdateApi(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}
function channelInputLimit(e:any){
        let key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
      }
function reset() {
  form = new Config()
}
</script>

<style lang="scss">
.config-page {
  .ant-input-number {
    width: 300px;
  }
}
</style>
